<template name="mars-from">
	<view>
		<u-section v-if="title!=''" :title="title" :right="false" :font-size="set.titIconSize" :line-color="set.titLineColor" :color="set.titColor" :bold="false"></u-section>
		<u-form :model="model" ref="uForm">
		<view v-for="(item,index) in myData.option" :key="index">
			
			<view v-if="item.type==1 || item.type==2 || item.type=='number' || item.type=='int'">
				<u-form-item :label-position="set.labelPosition" :label-width="myData.config.labelWidth==null?set.labelWidth:myData.config.labelWidth" :label-align="set.labelAlign" :label="item.name" :border-bottom="set.borderBottom" :error-type="set.errorType" :required="item.must">
					<u-input 
					type="number"
					v-model="model[item.field_name]"
					:border="item.border==null?set.text.order:item.border"
					:placeholder="item.tips"
					></u-input>
				</u-form-item>
			</view>

			<view v-else-if="item.type==3 || item.type=='text'">
				<u-form-item :label-position="set.labelPosition" :label-width="myData.config.labelWidth==null?set.labelWidth:myData.config.labelWidth" :label-align="set.labelAlign" :label="item.name" :border-bottom="set.borderBottom" :error-type="set.errorType" :required="item.must">
					<u-input 
					type="text"
					v-model="model[item.field_name]"
					:border="item.border==null?set.text.order:item.border"
					:placeholder="item.tips"
					></u-input>
				</u-form-item>
			</view>
			

			<view v-else-if="item.type==4 || item.type=='textarea'">
				<u-form-item :label-position="set.labelPosition" :label-width="myData.config.labelWidth==null?set.labelWidth:myData.config.labelWidth" :label-align="set.labelAlign" :label="item.name" :border-bottom="set.borderBottom" :error-type="set.errorType" :required="item.must">
					<u-input
					v-model="model[item.field_name]"
					type="textarea"
					:border="item.border==null?set.text.order:item.border"
					:placeholder="item.tips"
					:auto-heigh="set.textareaHeigh"
					></u-input>
				</u-form-item>
			</view>
			
			<view v-else-if="item.type==5 || item.type=='radio'">
				<u-form-item :label-position="set.labelPosition" :label-width="myData.config.labelWidth==null?set.labelWidth:myData.config.labelWidth" :label-align="set.labelAlign" :label="item.name" :border-bottom="set.borderBottom" :error-type="set.errorType" :required="item.must">
					<u-radio-group
					 v-model="model[item.field_name]"
					 :wrap ="item.wrap==null?set.radio.wrap:item.wrap"
					 :size="item.size==null?set.radio.size:item.size"
					 :square="item.square==null?set.radio.square:item.square"
					 :width="item.width==null?set.radio.width:item.width"
					 @change="radioChange($event,item)">
						<u-radio v-for="(radio, j) in item.list" :key="j" :name="radio.value==null?radio.name:radio.value" :disabled="radio.disabled">{{radio.name}}</u-radio>
					</u-radio-group>
				</u-form-item>
			</view>
			
			<view v-else-if="item.type==6 || item.type=='checkbox'">
				<u-form-item :label-position="set.labelPosition" :label-width="myData.config.labelWidth==null?set.labelWidth:myData.config.labelWidth" :label-align="set.labelAlign" :label="item.name" :border-bottom="set.borderBottom" :error-type="set.errorType" :required="item.must">
					<u-checkbox-group 
					v-model="model[item.field_name]"
					:max="item.max==null?999:item.max" 
					:wrap="item.wrap==null?set.checkbox.wrap:item.wrap"
					:size="item.size==null?set.checkbox.size:item.size"
					:square="item.square==null?set.checkbox.square:item.square"
					:width="item.width==null?set.checkbox.width:item.width"
					@change="checkboxChange($event,item)">
						<u-checkbox v-for="(checkbox, j) in item.list" :key="j" :name="checkbox.value==null?checkbox.name:checkbox.value" v-model="checkbox.checked" :disabled="checkbox.disabled">{{checkbox.name}}</u-checkbox>
					</u-checkbox-group>
				</u-form-item>
			</view>
			
			<view v-else-if="item.type==7 || item.type=='select'">
				<u-form-item :label-position="set.labelPosition" :label-width="myData.config.labelWidth==null?set.labelWidth:myData.config.labelWidth" :label-align="set.labelAlign" :label="item.name" :border-bottom="set.borderBottom" :error-type="set.errorType" :required="item.must">
					<u-input
					type="select"
					v-model="model[item.field_name]"
					:placeholder="item.tips==null?set.select.tips:item.tips"
					:border="item.border==null?set.select.order:item.border"
					@click="showSelect(index)"></u-input>
					
					<u-action-sheet 
					:list="item.list"
					v-model="myData.option[index].show"
					@click="selectConfirm($event,item)"
					></u-action-sheet>	
				</u-form-item>
			</view>
			
			<view v-else-if="item.type==8 || item.type=='switch'">
				<u-form-item :label-position="set.labelPosition" :label-width="myData.config.labelWidth==null?set.labelWidth:myData.config.labelWidth" :label-align="set.labelAlign" :label="item.name" :border-bottom="set.borderBottom" :error-type="set.errorType" :required="item.must">
					<u-switch slot="right"
					v-model="item.value"
					:size="item.size==null?set.switchs.size:item.size"
					@change="switchChange($event,item)"
					></u-switch>		
				</u-form-item>
			</view>
			
			<view v-else-if="item.type==9 || item.type=='image'">
				<u-form-item :label-position="set.labelPosition" :label-width="myData.config.labelWidth==null?set.labelWidth:myData.config.labelWidth" :label-align="set.labelAlign" :label="item.name" :border-bottom="set.borderBottom" :error-type="set.errorType" :required="item.must">
					<u-upload
					:action="uploadUrl"
					:auto-upload="item.auto==null?set.upload.auto:item.auto"
					:header="set.upload.header"
					:index="item.field_name"
					:before-upload="beforeUpload"
					:before-remove="beforeRemove"
					:max-size="set.upload.max_size"
					:upload-text="actionAdd==true?'选择图片':'修改图片'"
					:file-list="item.file_list"
					:show-progress="set.upload.progress"
					@on-success="upload()"
					@on-remove="imgRemove()"
					:max-count="item.max==null?set.upload.max:item.max"
					></u-upload>
					<view v-if="item.tips!=''" class="tips">{{item.tips}}</view>
					<view v-if="!actionAdd" class="text">不修改原图片则不选</view>
				</u-form-item>
			</view>
		</view>
		
		</u-form>
		
		<u-button :type="set.butType" @click="submit">{{butText}}</u-button>
	</view>
</template>

<script>
export default {
	name: 'mars-from',
	props: {
		value: {
			type: [Object, Array],
			default: {}
		},
		option: {
			type: [Object, Array],
			default: {}
		},
		set:{
			type: [Object, Array],
			default: {}
		},
		getData:{
			type: [Object, Array],
			default: {}
		},
		uploadUrl:{
			type: [String],
			default:''
		},
		title:{
			type: [String],
			default:''
		},
		butText:{
			type: [String],
			default:'确定'
		},
		actionAdd:{
			type: [Boolean],
			default:true,
		}
	},
	data() {
		return {
			myData:this.option,
			model:this.value,
			upAction:this.uploadUrl,
			fileList:[],
			rules:{}
		};
	},
	// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
	onReady() {
		//this.$refs.uForm.setRules(this.rules);
	},
	watch: {
		value(val){
			this.model=val;
			this.myData.unsetval.map(field=>{				//过滤无用字段
				if(this.model.hasOwnProperty(field)){
					delete this.model[field]
				}
			});
			this.myData.option.map(item => {
				if(item.type=='switch'){
					item.value=this.model[item.field_name]==1?true:false;
				}else if(item.type == 'image'){
					let img=this.model[item.field_name];
					if(img!='' && img!=undefined){
						item.file_list=[{url:img}]
					}else{
						item.file_list='';
					}
				}
				return item;
			});
		},
		actionAdd(val){
			this.actionAdd=val;
		}
	},
	computed: {
	},
	methods: {
		submit(){
			this.$emit('submit',this.model);
		},
		checkboxChange(e,item) {
			this.model[item.field_name]=e.join(',');
			//console.log(this.model);
		},
		radioChange(e,item){
			this.model[item.field_name]=e;
			//console.log(this.model);
		},
		switchChange(e,item) {
			e=e==true?1:0;
			this.model[item.field_name]=e;
			//console.log(this.model);
		},
		selectConfirm(e,item){
			this.model[item.field_name]=item.list[e].text;
			//console.log(this.model);
		},
		showSelect(index){
			this.myData.option[index].show=true;
		},
		//上传成功
		upload(data, index, lists, name){
			if(data.errno == 0 && data.message == 'ok'){
				this.model[name]=data.data.path;
				this.showToast('上传成功');
			}else{
				this.showToast('上传失败，请重试！','error');
			}
			//console.log(this.model);
		},
		
		// 图片上传前处理
		beforeUpload(index, list){

		},
		
		// 图片移除处理
		imgRemove(index,lists,name){
			if(this.actionAdd){
				let path=this.model[name];
				this.$emit('imgDelet',path);
			}else{
				this.model[name]='';
			}
		},
		
		// 发起提示
		showToast(message,type="success"){
			if(type == "success"){
				uni.showToast({
					title: message,
					icon: 'none'
				});
			}else{
				uni.showModal({
				    title: '错误提示',
				    content: message,
					showCancel:false
				});
			}
		}
		
	}
};
</script>

<style lang="scss">
	.tips{
		color: #909399;
	}
	.text{
		color: #ff9900;
	}
</style>
